<template>
  <UPage>
    <UPageBody>
      <UCard>
        <template #header>
          <h2 class="text-xl font-semibold">
            功能菜单
          </h2>
        </template>

        <div class="grid grid-cols-2 gap-4">
          <UButton
            v-for="item in menuItems"
            :key="item.label"
            color="primary"
            variant="outline"
            class="flex flex-col items-center justify-center h-24"
            @click="handleMenuItemClick(item.path)"
          >
            <UIcon
              :name="item.icon"
              class="w-8 h-8 mb-2"
            />
            <span>{{ item.label }}</span>
          </UButton>
        </div>
      </UCard>
    </UPageBody>
  </UPage>
</template>

<script setup lang="ts">
const menuItems = ref([
  { label: '个人中心', icon: 'i-heroicons-user-circle', path: '/profile' },
  //   { label: '系统设置', icon: 'i-heroicons-cog-6-tooth', path: '/settings' },
  { label: '标签管理', icon: 'i-heroicons-bell', path: '/system/tag' },
  { label: '关于我们', icon: 'i-heroicons-information-circle', path: '/about' }
])

const router = useRouter()
const toast = useToast()

const handleMenuItemClick = (path: string) => {
  if (path) {
    router.push(path)
  } else {
    toast.add({
      title: '提示',
      description: '功能正在开发中...',
      color: 'warning'
    })
  }
}
</script>
